<template>
    <van-config-provider theme="dark">
        <van-nav-bar title="" left-text="返回" left-arrow @click-left="onClickLeft" :border="false" fixed placeholder
            class="van-nav-bar">
        </van-nav-bar>
    </van-config-provider>

    <div class="headtop">
        <div class="headcenter">
            <div>
                <van-image width="5rem" height="5rem" fit="cover" radius="1.2rem" :src="userinfo?.avatar_url" />
            </div>
            <div style="position: relative; width: 100%;">
                <p class="font-bold">{{ userinfo?.username }}</p>
                <p class="text-light/80 ">联系方式：{{ userinfo?.fixed ?? "暂无" }}</p>
                <p class="text-light/80 ">社区：{{ userinfo?.school?.name ?? "暂无" }}</p>
                <van-button type="danger" class="van-button-follow" v-if="userinfo.is_follow"
                    @click="NoFollow(userinfo.id)">取消关注</van-button>
                <van-button type="primary" class="van-button-follow" v-else @click="Follow(userinfo.id)">关注</van-button>
            </div>
        </div>
        <van-text-ellipsis rows="3" :content="text" expand-text="展开" collapse-text="收起"
            style="color: aliceblue;width: 94%;margin: 0.5rem auto;" />
    </div>

    <div class="boutonlin" style="background-color: rgba(255, 255, 255, 0.3);"></div>

    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="OnRefresh">
        <van-list v-model:loading="loading" :offset="10" :finished="finished" finished-text="没有更多了" @load="OnLoad">
            <div class="list" v-for="(item, index) in list" :key="index">
                <div class="divbody">
                    <!-- 头部 -->
                    <div class="headbody">
                        <van-image width="3.5rem" height="3.5rem" fit="cover" radius="1.2rem"
                            :src="item.user.avatar_url" />
                        <div>
                            <p class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-light text-shadow-lg">
                                {{ item.school_text }} {{ item.user.username }}</p>
                            <p class="text-light/80 text-lg text-shadow-lg">{{ item.cleatetime_text }}</p>
                        </div>
                    </div>

                    <!-- 内容 -->
                    <h2>{{ item.title }}</h2>
                    <van-text-ellipsis rows="3" :content="item.content" expand-text="展开" collapse-text="收起"
                        style="color: aliceblue;" />

                    <!-- 图片 -->
                    <div class="imgdiv">
                        <van-image fit="cover" radius="0.2rem" :src="img" class="imgitem"
                            v-for="(img, imgindex) in item.thumbs_url" :key="imgindex"
                            @click="Lookimg(item.thumbs_url, imgIndex)" />
                    </div>

                    <van-image-preview v-model:show="previewShow" :images="previewImages" :start-position="previewIndex"
                        @close="previewShow = false" />

                    <!-- 操作栏（点赞，收藏） -->
                    <div style="margin-top: 0.5rem;color: rgba(255, 255, 255, 0.6);line-height: 2rem;">
                        <van-icon name="good-job" />
                        {{ item.likes_text }} &nbsp;赞
                        <label :for="item.id"><van-icon name="chat-o" color="#f5f5f5" size="2rem"
                                style="float: right;" /></label>
                        <van-icon name="star" color="red" size="2rem" v-if="item.star" @click="BtLike(item.id, index)"
                            style="float: right;right: 1rem;" />
                        <van-icon name="star-o" color="#f5f5f5" size="2rem" v-else @click="BtLike(item.id, index)"
                            style="float: right;right: 1rem;" />
                        <van-icon name="good-job" color="#4286d1" size="2rem" v-if="item.is_like"
                            @click="BtGood(item.id, index)" style="float: right;right: 2rem;" />
                        <van-icon name="good-job-o" color="#f5f5f5" size="2rem" v-else @click="BtGood(item.id, index)"
                            style="float: right;right: 2rem;" />
                    </div>

                    <!-- 留言输入框 -->
                    <van-cell-group inset style="margin-top: 0.5rem;" class="mx-3 my-2">
                        <van-field v-model="item.inputvalue" placeholder="留言" class="pushtext" :id="item.id">
                            <template #button>
                                <van-button size="small" type="primary" style="width: 2.5rem;border-radius: 0.5rem;"
                                    @click="Senttall(item.id, index)">发&nbsp;送</van-button>
                            </template>
                        </van-field>
                    </van-cell-group>

                    <!-- 留言区 -->
                    <van-config-provider theme="dark" st>
                        <van-collapse v-model="activeNames" ref="collapse" class="talldiv" accordion>
                            <van-collapse-item title="查看留言" :name="index" class="talllist">
                                <p v-for="(tall, tallindex) in item.tall" :key="tallindex">
                                    {{ tall.user.username }}({{ tall.createtime_text }}):&nbsp;&nbsp;{{ tall.title
                                    }}
                                </p>
                                <p style="text-align: right;"><a href="#" style="color:aquamarine;" @click="Shp">收起</a>
                                </p>
                            </van-collapse-item>
                        </van-collapse>
                    </van-config-provider>

                </div>
                <div class="boutonlin"></div>
            </div>
        </van-list>
    </van-pull-refresh>

    <van-back-top right="6vw" bottom="12vh" />
</template>


<script setup>

const { proxy } = getCurrentInstance();
// 接收地址栏上的userid参数
const { userid } = proxy.$route.query

//留言
const activeNames = ref('1');
const collapse = ref(null);

const user = proxy.$user.value;
const list = ref([])
const page = ref(1)

//上拉加载
const finished = ref(false)
const isLoading = ref(false);
const loading = ref(false);

// 新增：图片预览方法
const previewShow = ref(false);
const previewImages = ref([]);
const previewIndex = ref(0);

const text = ref('');
const userinfo = ref({});

onMounted(() => {
    GetUserInfo();
}
)

const GetUserInfo = async () => {
    const res = await proxy.$http.post({
        url: '/user/getuserinfo',// 接口地址
        params: {
            userid: userid,
            id: user.id,
        }
    })

    if (res.code === 1) {
        userinfo.value = res.data
        if (userinfo.value.signature) {
            text.value = '签名：' + userinfo.value.signature;
        } else {
            text.value = '签名：作者很懒，没留下签名呢~';
        }
    } else {
        proxy.$fail(res.msg);
        proxy.$router.back();
    }
}

//返回
const onClickLeft = () => {
    proxy.$router.back();
}

// 下拉刷新
const OnRefresh = () => {
    isLoading.value = true;
    loading.value = true;
    finished.value = false;
    list.value = [];
    page.value = 1;

    setTimeout(OnLoad, 1500)
};

// 收起留言
const Shp = () => {
    activeNames.value = '';
}

// 上拉加载
const OnLoad = async () => {
    if (isLoading.value === true) isLoading.value = false;
    const params = {
        userid: userid,
        page: page.value,
        id: user.id,
    }

    const res = await proxy.$http.post({
        url: '/posts/getposts',// 接口地址
        params
    })

    loading.value = false;
    // finished.value = true;

    if (res.code === 1) {
        let count = res.data.count;
        list.value = list.value.concat(res.data.item);

        if (list.value.length >= count) {
            finished.value = true;

            return false;
        }

        page.value += 1;
    } else {
        finished.value = true;

        proxy.$fail(res.msg);
    }
}

// 修改图片预览方法
const Lookimg = (images, currentIndex) => {
    previewImages.value = images;
    previewIndex.value = currentIndex;
    previewShow.value = true;
};

// 点赞
const BtGood = async (id, index) => {
    const params = {
        id: id,
        userid: user.id,
    }
    const res = await proxy.$http.post({
        url: '/posts/good',// 接口地址
        params
    })

    if (res.code === 1) {
        list.value[index].is_like = !list.value[index].is_like;
    }

    if (list.value[index].is_like) {
        list.value[index].likes_text += 1
    } else {
        list.value[index].likes_text -= 1
    }
}

//收藏
const BtLike = async (id, index) => {
    const params = {
        id: id,
        userid: user.id,
    }

    const res = await proxy.$http.post({
        url: '/posts/star',// 接口地址
        params
    })

    if (res.code === 1) {
        proxy.$toast(res.msg);
        list.value[index].star = !list.value[index].star;
    }

}

// 留言
const Senttall = async (id, index) => {
    const params = {
        postid: id,
        userid: user.id,
        title: list.value[index].inputvalue,
    }
    const res = await proxy.$http.post({
        url: '/posts/sendtall',// 接口地址
        params
    })

    if (res.code === 1) {
        proxy.$toast(res.msg);
        list.value[index].inputvalue = '';
        const tall = await proxy.$http.post({
            url: '/posts/gettall',// 接口地址
            params: {
                postid: id,
                userid: user.id,
            }
        })
        if (tall.code === 1) {
            list.value[index].tall = tall.data
        }
    } else {
        proxy.$fail(res.msg);
    }
}

//关注
const Follow = async (id) => {
    const params = {
        followid: id,
        userid: user.id,
    }
    const res = await proxy.$http.post({
        url: '/user/follow',// 接口地址
        params
    })
    if (res.code === 1) {
        proxy.$toast(res.msg);
        userinfo.value.is_follow = !userinfo.value.is_follow;
    } else {
        proxy.$fail(res.msg);
    }
}

//取消关注
const NoFollow = async (id) => {
    const params = {
        followid: id,
        userid: user.id,
    }
    const res = await proxy.$http.post({
        url: '/user/unfollow',// 接口地址
        params
    })
    if (res.code === 1) {
        proxy.$toast(res.msg);
        userinfo.value.is_follow = !userinfo.value.is_follow;
    } else {
        proxy.$fail(res.msg);
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.imgdiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1%;
    /* 间距统一由父容器控制 */
    padding: 0;
    margin: 0;
}

.imgitem {
    margin-top: 1.5%;
    /* 增加优先级，覆盖组件默认样式 */
    width: auto !important;
    /* 宽度由父容器控制 */
}

/* 1张图时：占满宽度 */
.imgdiv .imgitem:only-child {
    width: 100% !important;
    aspect-ratio: auto
}

/* 2张图时：五五分 */
.imgdiv .imgitem:nth-child(1):nth-last-child(2),
.imgdiv .imgitem:nth-child(2):nth-last-child(1) {
    width: calc(50% - 0.5%) !important;
    /* 减去一半gap避免溢出 */
    aspect-ratio: 1/1
}

/* 3张及以上时：所有图片都应用32.5%宽度 */
/* 核心修复：匹配总数量≥3的情况，所有子元素都生效 */
.imgdiv .imgitem:nth-last-child(n+3),
/* 总数量≥3时，匹配最后1个及之前的所有元素 */
.imgdiv .imgitem:nth-last-child(n+3)~.imgitem {
    width: 32.5% !important;
    aspect-ratio: 1/1
}

.headbody {
    display: flex;
    align-items: center;
}


.headbody p:nth-child(1) {
    font-size: 1.1rem;
    text-indent: 0.8rem;
    /* 字间距 */
    letter-spacing: 0.1rem;
    color: white;
}

.headbody p:nth-child(2) {
    font-size: 0.8rem;
    text-indent: 0.8rem;
    color: aliceblue;
    margin-top: 0.8rem;
}

.divbody {
    width: 94%;
    /* background-color: rgb(25, 25, 25); */
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 处理bug */
    margin: 0.5rem auto;
}

h2 {
    color: aliceblue;
    font-size: 1.2rem;
}

p {
    color: aliceblue;
}

.boutonlin {
    height: 0.5rem;
    background-color: rgb(25, 25, 25);
}

.pushtext {
    background-color: rgb(25, 25, 25);
    --van-field-input-text-color: aliceblue;
    --van-field-placeholder-text-color: rgba(255, 255, 255, 0.55);
    text-indent: 1rem;
    font-size: 1rem;
    padding-left: 0.5rem;
}

.talldiv {
    margin-top: 0.8rem;

}

.talllist {
    --van-collapse-item-content-background: rgb(25, 25, 25);
    --van-collapse-item-content-line-height: 1.8rem;
    --van-collapse-item-duration: 0.25s;
}

.headtop {
    height: 12rem;
    background-color: rgba(25, 25, 25);
}

.headcenter {
    display: flex;
    width: 94%;
    margin: 0 auto;
}

.headcenter p:nth-child(1) {
    font-size: 1.2rem;
    text-indent: 1rem;
    /* 字间距 */
    letter-spacing: 0.2rem;
    color: white;
    height: 2rem;
    line-height: 2rem;
    width: 73%;
    /* 超出部分打省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headcenter p:nth-child(2) {
    font-size: 1rem;
    text-indent: 1rem;
    color: rgba(255, 255, 255, 0.55);
    height: 1.5rem;
    line-height: 1.5rem;
}

.headcenter p:nth-child(3) {
    font-size: 1rem;
    text-indent: 1rem;
    color: rgba(255, 255, 255, 0.55);
    height: 1.5rem;
    line-height: 1.5rem;
}

.van-button-follow {
    position: absolute;
    top: 0.5rem;
    right: 0px;
    width: 4.5rem;
    height: 2rem;
}
</style>
